<template>
	<view class="">
		<!-- 排行榜 -->
		<view class="paihang">
			<!-- 顶部导航 -->
			<view class="" style="background-color: white;border-radius: 20px;">
				<view class="top_paihangbox" style="padding: 10px 10px 20px 10px;">
					<view class="rebang">
						<span style="font-size: 50rpx;font-weight: 1000;">海鲜热榜</span>
						<span style="font-size: 30rpx;font-weight: 600;margin-left: 5px;">发现新鲜事 发生新买卖
							~</span>
					</view>
					<view class="quanbu" @click="gotoRankDetail">
						<span style="font-size: 30rpx;font-weight: 600;">全部></span>
					</view>
				</view>

				<!-- 内容 (轮播)-->
				<view class="center_content" style="padding: 0 10px 10px 10px;margin-top: -20px;">
					<swiper class="swiper" circular autoplay="true">
						<swiper-item v-for="(swiperItem, index) in 3" :key="index">
							<view v-for="(item, itemIndex) in getItemsBySlice(hotTopicList, index, 3)" :key="itemIndex"
								style="margin-top:16px;display: flex;justify-content: space-between;align-items: center;background-color: rgba(255, 255, 255, 0);">
								<!-- 数字＋内容 -->
								<view class="left_content"
									style="display: flex;align-items: center;justify-content: space-between;">
									<span v-if="!item.label"
										style="font-size: 25rpx;font-weight: 700;">{{ getItemIndex(index, itemIndex) }}</span>
									<span v-else style="font-size: 30rpx;font-weight: 700;">·</span>
									<view class="" style="margin-left: 10px;display: flex;align-items: center;">
										<img style="width: 15px;height: 15px;" src="@/static/ui/hotjinhao.png" alt="">
										<span
											style="font-size: 30rpx;font-weight: 900;margin-left: 5px;">{{ truncateTitle(item.title, 10) }}</span>
										<view class="" v-if="item.label">
											<image style="height: 20px;margin-left: 5px;" v-if="item.label === '1'" src="@/static/ui/fresh.png" mode="heightFix"></image>
											<image style="height: 20px;margin-left: 5px;" v-if="item.label === '2'" src="@/static/ui/delicious.png" mode="heightFix"></image>
											<image style="height: 20px;margin-left: 5px;" v-if="item.label === '3'" src="@/static/ui/amazing.png" mode="heightFix"></image>
											
										</view>
									</view>
								</view>

								<!-- 人气 -->
								<view class="" style="color: #ccc;margin-right: 5px;">
									<span>{{ item.popularity }}</span>
									<span style="margin-left: 3px;">人气</span>
								</view>
							</view>
						</swiper-item>
					</swiper>

				</view>

			</view>

			<!-- 广告图 -->
			<view style="width: 100%;height: 10vh;margin-top: 14px;" class="">
				<img style="width: 100%;height: 100%;border-radius: 15px;"
					src="https://img1.baidu.com/it/u=1176362935,1432244848&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706547600&t=cc073152959dc4074d0ebeb151da4c2e"
					alt="">
			</view>

			<!-- 底部主要内容  跟着热榜来的-->
			<view class="" v-for="(topicSku,indexa) in squareSkuList" :key="indexa" style="margin-top: 10px;">
				<marketItem :topicSku="topicSku"></marketItem>
			</view>

		</view>

	</view>
</template>

<script>
	import marketItem from '../components/marketItem.vue'
	export default {

		data() {
			return {
				hotTopicList: [],
				current: 0,
				pages: 1,
				squareSkuList: []

			}
		},
		mounted() {
			this.listHotTopic()
			this.getSquareSkuList()
		},
		components: {
			marketItem
		},
		methods: {
			gotoRankDetail(){
				uni.navigateTo({
					url: '../../pagesA/rankDetail/rankDetail'
				
				});
			},
			async listHotTopic() {
				const result = await this.$u.api.getHotTopic();
				this.hotTopicList = result

			},
			getItemsBySlice(array, index, totalItems) {
				const length = Math.ceil(array.length / totalItems);
				const start = index * length;
				const end = start + length;
				return array.slice(start, end);
			},
			getItemIndex(index, itemIndex) {
				let labelCount = this.hotTopicList.slice(0, index * 3 + itemIndex).filter(item => item.label).length;
				return itemIndex + index * 4 - labelCount + 1;
			},

			truncateTitle(title, maxLength) {
				if (title.length > maxLength) {
					return title.slice(0, maxLength) + '...';
					// 或者使用 substring 方法
					// return title.substring(0, maxLength) + '...';
				}
				return title;
			},

			async getSquareSkuList() {
				if (this.current < this.pages) {
					this.current++
					let form = {
						current: this.current,
						size: 3,
						source: 0
					}

					let result = await this.$u.api.getTopicSku(form);


					this.pages = result.pages

					this.squareSkuList = this.squareSkuList.concat(result.records);


				} else {
					console.log("没有数据了");
				}


			}

		}
	}
</script>

<style lang="scss" scoped>
	.top_paihangbox {
		border-radius: 20px 20px 0 0;
		align-items: center;
		background: linear-gradient(to bottom, rgba(255, 255, 0, 1), rgba(255, 255, 255, 0));
		display: flex;
		justify-content: space-between;

		.rebang {
			align-items: center;
		}
	}
</style>